<template>
  <div id="app">
    <div class="container-subject">
      <div class="post-article-container">
        <el-row :gutter="20">
          <el-col
            :span="20"
            :offset="2"
            style="
              border: 0px solid #aaa;
              border-radius: 10px;
              padding: 20px 20px;
              display: inline-block;
            "
          >
            <el-form ref="form" :model="projectInfo" label-width="80px">
              <el-form-item label="项目名称">
                <el-input v-model="projectInfo.name"></el-input>
              </el-form-item>
            </el-form>

            <el-form :inline="true" :model="projectInfo" label-width="80px">
              <el-form-item label="地区">
                <el-select v-model="projectInfo.city" placeholder="请选择地区">
                  <el-option
                    v-for="citys in projectCityList"
                    :key="citys.cid"
                    :label="citys.city"
                    :value="citys.city"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="领域">
                <el-select
                  v-model="projectInfo.region"
                  placeholder="请选择领域"
                >
                  <el-option
                    v-for="region in projectRegionList"
                    :key="region.id"
                    :label="region.region"
                    :value="region.region"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="类型">
                <el-select v-model="projectInfo.type" placeholder="请选择类型">
                  <el-option
                    v-for="types in projectTypeList"
                    :key="types.id"
                    :label="types.type"
                    :value="types.type"
                  />
                </el-select>
              </el-form-item>

              <el-form-item label="上传项目封面">
                <div>
                  <el-upload
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                    :action="'http://localhost:8222/project/oss/file/fileUpload'"
                    class="avatar-uploader"
                  >
                    <img :src="projectInfo.logo" width="200px" height="200px" />
                  </el-upload>
                </div>
              </el-form-item>
              <el-form-item label="课程简介">
                <tinymce :height="300" v-model="projectInfo.desc" />
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <br />

        <div style="text-align: center">
          <el-button type="primary" round @click="doPost()">发布文章</el-button>
        </div>
        <br />
      </div>
    </div>
  </div>
</template>
<script>
import projectApi from "@/api/project";
import Tinymce from "~/components/Tinymce";
export default {
  components: { Tinymce },
  data() {
    return {
      projectInfo: {
        name: "",
        region: "",
        type: "",
        city: "",
        desc: "",
        logo: "https://img.simoniu.com/优客工场.jpg",
      },
      projectTypeList: [],
      projectRegionList: [],
      projectCityList: [],
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      projectApi.getReigionList().then((response) => {
        this.projectRegionList = response.data;
      });
      projectApi.getTypeList().then((response) => {
        this.projectTypeList = response.data;
      });
      projectApi.getCityList().then((response) => {
        this.projectCityList = response.data;
      });
    },
    doPost() {
      projectApi.addProject(this.projectInfo).then((response) => {
        console.log("project----" + this.projectInfo.name);
        // 提示信息
        this.$message({
          type: "success",
          message: "成功添加项目信息!",
        });
        // 路由跳转到下一个页面
        window.location.href = "/";
      });
    },
    // 上传成功调用
    handleAvatarSuccess(res, file) {
      // 将地址赋值给封面
      this.projectInfo.logo = res.data;
    },
    // 上传之前调用
    beforeAvatarUpload(file) {
      // 判断文件大小
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>
<style>
/*总布局样式表*/
.container {
  width: 100%;
  background-color: #fafafa;
}

.container-subject {
  width: 80%;
  background-color: #fafafa;
  margin: 0px auto;
}

.blog-container {
  width: 100%;
  margin: 0px;
  display: flex;
  padding: 10px;
  align-content: space-around;
}

.post-article-container {
  width: 100%;
  background-color: #fafafa;
}
</style>